<template>
  <div class="page">
    <h2>请先测一测</h2>
    <p>看看自己应该选哪些学科</p>
    <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/holland-xuanke.png" alt="">
    <button class="button button-energized" @click="toState(4)" v-show="hollandTest.xuankeFinish">查看报告</button>
    <button class="button button-energized" @click="toState(1)" v-show="!hollandTest.xuankeFinish&&!hollandTest.xuankeReset">开始测评</button>
    <button class="button button-energized button-outline" @click="toState(2)" v-show="continues">继续测评</button>
    <button class="button button-stable button-outline" v-show="hollandTest.zhiyuanFinish" @click="toState(3)">重新测评</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  layout: 'xuanke',
  middleware: 'holland',
  computed: {
    continues () {
      if ((this.hollandList.xuanke && this.hollandList.xuanke.length) || this.hollandTest.xuankeReset) {
        return true
      }
    },
    ...mapState({
      hollandTest: 'hollandTest',
      hollandList: 'hollandList'
    })
  },
  methods: {
    ...mapMutations(['SET_HOLLAND_LIST', 'SET_HOLLAND_TEST']),
    toState (type) {
      if (type === 3) {
        this.SET_HOLLAND_TEST({
          xuankeReset: true
        })
        this.SET_HOLLAND_LIST({ name: 'xuanke', value: [] })
      } else if (type === 4) {
        this.$router.push({
          name: 'xuanke-report'
        })
        return false
      }
      this.$router.push({
        name: 'xuanke-holland'
      })
    }
  }
}
</script>
<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: $energized;
  padding: 0 128px;
  .button {
    margin-bottom: 10px;
  }
  h2 {
    font-size: $size24;
    margin-bottom: 8px;
    font-weight: normal;
  }
  p {
    margin-bottom: 28px;
  }
  img{
    width: 100%;
    display: inline-block;
    margin-bottom: 40px;
  }
}
</style>
